<template>
  <div id="banner">
    <div class="banner" @click="bannerClick">
      <img class='banner-img'src="http://img1.qunarzz.com/sight/p0/1504/fe/fe8a9b09902792e7.water.jpg_600x330_e281172d.jpg" alt="">
      <div class="banner-info">
        <div class="banner-title">合肥万达主题乐园</div>
        <div class="banner-num"><i class="iconfont icon-xiaoxi head-left"></i>39</div>
      </div>
      <div class="banner-icon" @click="back">
         <i class="iconfont icon-fanhui"></i>
      </div>
    </div>
    <gallary :imgs="imgs"
             v-show="showGallary"
             @close="handleGallary"
    ></gallary>
  </div>
</template>

<script>
  import gallary from '../../../components/Gallary'
  export default {
    name: "detail",
    methods:{
      back(){
        this.$router.go(-1)
      },
      bannerClick(){
        this.showGallary = true;
      },
      handleGallary(){
        this.showGallary = false;
      }
    },
    data(){
      return{
        showGallary:false,
        imgs:[
          'http://img1.qunarzz.com/sight/p0/201403/10/df6efccd976ea66247bc5dd3e57835f7.jpg_r_800x800_73e3f7df.jpg',
          'http://img1.qunarzz.com/sight/p0/201403/10/41ed15e0889c8d5758fa58bcde6672d0.jpg_r_800x800_370870ee.jpg',
          'http://img1.qunarzz.com/sight/p0/201403/10/aeef5af7d260fa4ace76c6266bcba0aa.jpg_r_800x800_504ea05c.jpg'
        ]
      }
    },
    components:{
      gallary
     }
  }
</script>

<style scoped lang="stylus">
  .banner
    overflow hidden
    height 0
    padding-bottom 55%
    position relative
    .banner-img
      width:100%
    .banner-info
      display flex
      position absolute
      bottom 0
      left 0
      right 0
      height 45px
      line-height 45px
      align-items center
      margin-right 10px
      color #fff
      font-size 16px
      .banner-title
        flex:1
        text-align center
      .banner-num
        padding:0 10px
        height 30px
        line-height 30px
        border-radius 20px
        background rgba(0,0,0,.5)

    .banner-icon
      position absolute
      width:30px;
      height 30px
      border-radius 50%
      line-height 30px
      text-align center
      background rgba(0,0,0,0.4)
      font-size 16px
      top:10px;
      left:10px
      color #fff

</style>
